<template>
  <div>
    <div id="mapApp" v-bind:style="{height: mapHeight + 'px',width:'100%', background: '#fff'}"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { mapActions } from 'vuex';
import * as mapOper from '../../scripts/mapOper.js';

export default {
  name: 'OpenLayerMap',
  props: {
    mapHeight: Number,
    required: true
  },
  data() {
    return {
      // contentHeight:0,
      
    };
  },
  mounted: function() {
    let map = mapOper.initMap('mapApp');
    this.changeMap({ map: map });
  },
  methods: {
    ...mapActions(['changeMap'])
  }
};
</script>
